<template>
    <div>
        <div style="float: left;width: 15%;">
            <van-sidebar v-model="active">
                <van-sidebar-item :title="item.title" v-for="item in sj" :key="item" />
            </van-sidebar>
        </div>
        <div style="float: right;width: 85%;">

            <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
                <van-card :price="item.price" :desc="item.ms" :title="item.title" :thumb="item.img" v-for="item in sp"
                    :key="item" />
                <p>刷新次数: {{ count }}</p>
            </van-pull-refresh>

        </div>



    </div>
</template>

<script setup>
import { ref } from 'vue'
const active = ref(0);
let sj = ref([
    { title: '热门推荐' },
    { title: 'Oppo' },
    { title: '一加' },
    { title: '平板电脑' },
    { title: '智能穿戴' },
    { title: '智能耳机' },
    { title: '官方配件' },
    { title: '潮流好物' },
    { title: '官方定制' },
    { title: '官方服务' },
])
let sp = ref([
    { img: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg', title: 'Oppo Find N3手机', ms: '超轻薄折叠大屏', price: '8999' },
    { img: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg', title: 'Oppo Find N3手机', ms: '超轻薄折叠大屏', price: '8999' },
    { img: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg', title: 'Oppo Find N3手机', ms: '超轻薄折叠大屏', price: '8999' },
    { img: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg', title: 'Oppo Find N3手机', ms: '超轻薄折叠大屏', price: '8999' },
])
</script>

<style scoped></style>